<template>
  <div class="container-data">
    <!-- 底图 -->
    <mapOl :ishiddenConference="true"/>
    <!-- 资源目录 v-drag-->
    <div class="resource">
      <div class="leftContent">
        <div class="select-top">
          <el-select
            v-model="value1"
            class="m-2"
            placeholder="请选择区县"
            size="small"
            style="margin-right: 0.1rem"
            @change="selectChange"
            clearable
          >
            <el-option
              v-for="item in options1"
              :key="item.adcode"
              :label="item.areaName"
              :value="item.adcode"
            />
          </el-select>
          <el-select
            v-model="value2"
            class="m-2"
            placeholder="请选择乡镇"
            size="small"
            clearable
            @change="selectChangeRegion"
          >
            <el-option
              v-for="item in options2"
              :key="item.adcode"
              :label="item.areaName"
              :value="item.adcode"
            />
          </el-select>
        </div>
        <el-input
          size="small"
          class="input-search"
          clearable
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        >
        </el-input>
        <el-tree
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          highlight-current
          :filter-node-method="filterNode"
          ref="tree"
          @node-click="nodeClick"
        >
        </el-tree>
      </div>
    </div>
    <!-- 树节点表格弹框 -->
    <DetailTable
      :isShowDetailTable="isShowDetailTable"
      @handleClose="handleClose"
      :tableDatas="tableDatas"
      :pieData="pieData"
      @changeTableData="changeTableData"
      @rowClick="rowClick"
    />
    <!-- <el-dialog
      custom-class="dialog"
      title=""
      :visible.sync="isShowDetailTable"
      width="40%"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <DetailTable />
    </el-dialog> -->
    <div class="popup" id="popup">
      <div class="title-top">
        <p class="left">属性表</p>
        <i class="el-icon-close" @click="close"></i>
      </div>
      <div class="center">
        <div class="left">
          <div class="container" v-for="(item, index) in dataList" :key="index">
            <p class="leftLabel" :title="item.key">{{ item.key }}：</p>
            <p class="rightValue" :title="item.value">{{ item.value }}</p>
          </div>
        </div>
        <div class="right" v-if="nodeClickRowData&&nodeClickRowData.isDr">
          <p class="text">隐患信息二维码：</p>
          <img :src="srcUrl" alt="" srcset="" />
          <div type="text" class="down" @click="downLoad">下载二维码</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailTable from './DetailTable.vue'
import mapOl from '../../components/mapOl/index.vue'
import * as mapUtils from '@/components/mapOl/mapUtils'
import { Bus } from '@/utils/eventBus'
import Overlay from 'ol/Overlay'
import * as API from '../../api/resourceManagement/index'
import * as resourceAPI from '../../api/dataResource/index'
var pointDiv
export default {
  components: { mapOl, DetailTable },
  data() {
    return {
      nodeClickRowData: {},
      blob: null,
      srcUrl: '',
      element: null,
      isNav: '',
      isClass: '',
      form: {},
      filterText: '',
      isShowSpread1: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      isShowDetailTable: false,
      dataList: [],
      pointOverlay: null,
      tableDatas: {},
      options1: [],
      options2: [],
      value1: '',
      value2: '',
      geomText: null,
      geomName: null,
      pieData: {}
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getTreeData()
    this.getAreaPage('options1', 3)
    this.$nextTick(() => {
      const map = mapUtils.getMap()
      pointDiv = document.getElementById('popup')
      Bus.$on('getFeature', (obj) => {
        if (obj.feature) {
          pointDiv.style.display = 'block'
          this.dataList = []
          const coordinate = obj.evt.coordinate
          const objNewData = obj.feature.values_.properties
          this.getMapQr(objNewData)
          for (const key in objNewData) {
            if (key !== 'extend') {
              this.dataList.push({
                key: key,
                value: objNewData[key]
              })
            }
          }
          this.pointOverlay = new Overlay({
            element: pointDiv,
            id: 'toolTipBox1',
            positioning: 'center-center', // 一定要加上，否则会有偏移
            className: 'overlay-test',
            autoPanMargin: 20, // 设置自动平移边距
            autoPan: {
            // 如果弹框显示不全则自动归位
              animation: {
                duration: 250
              }
            }
          })
          this.pointOverlay.setPosition(coordinate)
          map.addOverlay(this.pointOverlay)
          // this.pointOverlay.setPositioning('bottom-left')
        }
      })
    })
  },
  methods: {
    selectChange(val) {
      if (!val) {
        this.value2 = ''
      }
      this.geomText = this.options1.filter(item => item.adcode === val)
      this.getAreaPage('options2', 4, val)
    },
    selectChangeRegion(val) {
      this.geomText = this.options2.filter(item => item.adcode === val)
    },
    getAreaPage(listName, level, val) {
      const params = {
        level: level,
        padcode: val
      }
      resourceAPI.areaPage(params).then((res) => {
        if (res.code === 200) {
          this[listName] = res.data
        }
      })
    },
    getMapQr(objNewData) {
      const params = {
        id: objNewData.extend[this.tableDatas.pkName],
        catalogId: this.isClass
      }
      resourceAPI.getMapQr(params).then((res) => {
        const blob = new Blob([res], { type: 'image/png' })
        const src = window.URL.createObjectURL(blob)
        this.blob = blob
        this.srcUrl = src
      })
    },
    downLoad() {
      const a = document.createElement('a')
      const blobUrl = window.URL.createObjectURL(this.blob)
      a.download = new Date().getTime() + '.png'
      a.href = blobUrl
      document.body.appendChild(a)
      // 下载文件
      a.click()
      // 释放内存
      URL.revokeObjectURL(blobUrl)
      document.body.removeChild(a)
    },
    getTreeData() {
      const params = {
        isGeom: true
      }
      API.managementCatalogTree(params).then((res) => {
        if (res.code === 200) {
          this.treeData = res.data
          this.nodeId = this.treeData[0].id
          // Bus.$emit('getEcharts', res.data[0])
        }
      })
    },
    close() {
      this.pointOverlay.setPosition(undefined)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    nodeClick(data) {
      // console.log(data, 'data')
      if (this.pointOverlay) {
        this.pointOverlay.setPosition(undefined)
        mapUtils.getMap().getView().animate({
          center: [100.871785, 36.959049],
          zoom: 6
        })
      }
      this.nodeClickRowData = data
      this.isClass = data.id
      this.isShowDetailTable = false
      // 子节点
      if (!data.children) {
        this.isShowDetailTable = true
        this.getManagementGeojson(data.id)
      }
      // Bus.$emit('getEcharts', data)
    },
    getManagementGeojson(val) {
      const data = {
        catalogId: val,
        geomText: this.geomText && this.geomText.length ? this.geomText[0].geom : null
      }
      resourceAPI.managementGeojson(data).then((res) => {
        if (res.code === 200) {
          mapUtils.removeClusterLayer('Cluster')
          if (res.data.geojson) {
            const obj = JSON.parse(res.data.geojson)
            this.geomName = res.data.geomName
            // 添加聚合点
            mapUtils.addCluster('Cluster', obj.features)
          }
          const obj1 = {
            queryFormList: [
              {
                'fieldValue': this.geomText && this.geomText.length ? this.geomText[0].geom : null,
                'queryField': res.data.geomName,
                'queryType': '2'
              }
            ]
          }
          this.getPageRecords(obj1)
          this.getPieChart()
        }
      })
    },
    getPieChart() {
      const params = {
        catalogId: this.isClass
      }
      API.getPieChart(params).then(res => {
        if (res.code === 200) {
          this.pieData = res.data
        }
      })
    },
    getPageRecords(obj) {
      console.log(obj, 'obj')
      const data = {
        showType: '1',
        pageNum: obj && obj.currentPage ? obj.currentPage : 1,
        catalogId: this.isClass,
        queryFormList: obj && obj.queryFormList ? obj.queryFormList : [],
        pageSize: obj && obj.pageSize ? obj.pageSize : 10
      }
      API.managementPageRecords(data).then((res) => {
        if (res.code === 200) {
          this.tableDatas = res.data
        }
      })
    },
    changeTableData(obj) {
      if (obj && obj.queryFormList) {
        obj.queryFormList.push({
          'fieldValue': this.geomText && this.geomText.length ? this.geomText[0].geom : null,
          'queryField': this.geomName,
          'queryType': '2'
        })
      }
      this.getPageRecords(obj)
    },
    rowClick(row) {
      if (this.tableDatas.geomName) {
        const point = JSON.parse(row[this.tableDatas.geomName])
        mapUtils.flyPoint(point.coordinates, 13)
      }
    },
    handleClose() {
      this.isShowDetailTable = false
    }
  },
  destroyed() {
    mapUtils.removeClusterLayer('Cluster')
  }
}
</script>

<style lang="scss" scoped>
.container-data {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .resource {
    font-weight: bold;
    position: absolute;
    z-index: 1111;
    top: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 1;
    opacity: 0.7;
    height: 100%;
    width: 17%;
    font-size: 17px;
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.8) 100%);
    box-shadow: inset 150px -50px 250px 0px rgba(0, 0, 0, 0.5);

    .leftHeader {
      text-align: left;
      width: 100%;
      height: 57px;
      line-height: 57px;
      border-bottom: 1px solid #e4e9f0;

      .leftTitle {
        display: inline-block;
        height: 25px;
        min-width: 77px;
        margin-left: 16px;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        .titleText {
          padding-left: 5px;
          border-left: 4px solid #3c6ef0;
        }
      }
    }
    .leftContent {
      height: calc(100% - 0.4rem);
      padding: 20px;
      background: url(@/assets/img/cbbj.png);
      .select-top {
        display: flex;
        margin-bottom: 0.1rem;
        :deep(.el-input__inner) {
          color: #fff;
        }
      }
      .input-search {
        :deep(.el-input__inner) {
          color: #fff;
        }
      }
      .demo-form-inline {
        height: 46px;
        padding-left: 6px;
        :deep(.el-form-item) {
          width: 48%;
          margin-right: 6px;
        }
      }
      .filter-input {
        width: 96%;
        height: 40px;
        margin: 0 auto;
        display: flex;
      }
    }
  }
  .popup {
    background: rgba(3, 27, 54, 0.7);
    border-radius: 0px 0px 0px 0px;
    // opacity: 1;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(0, 48, 76, 1), rgba(0, 48, 76, 1))
      1 1;
    font: italic bold 12px;
    min-width: 30px;
    position: absolute;
    bottom: 15px;
    left: -410px;
    display: none;
    .title-top {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #000000 url("@/assets/img/maptcbj.png");
      background-size: 100% 100%;
      width: 100%;
      height: 46px;
      .left {
        color: #c3d4fd;
        text-indent: 60px;
        font-size: 20px;
      }
      .el-icon-close {
        font-size: 20px;
        cursor: pointer;
        color: #fff;
      }
    }
    .center {
      display: flex;
      padding: 10px;
      justify-content: space-between;
      .left {
        flex: 1;
        min-width: 645px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: flex-start;
        font-size: 14px;

        .container {
          width: 49%;
          display: flex;
          height: 32px;
          line-height: 32px;
          &:nth-child(odd) {
            margin-right: 10px;
          }
          .leftLabel {
            width: 40%;
            text-align: right;
            color: #a2bbd6;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .rightValue {
            width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #e3f3ff;
          }
        }
      }
      .right {
        width: 239px;
        margin-left: 30px;
        text-align: center;
        .text {
          height: 47px;
          color: #fff;
        }
        img {
          width: 124px;
          height: 126px;
        }
        .down {
          width: 100%;
          height: 64px;
          text-decoration: underline;
          cursor: pointer;
          color: #027db4;
        }
      }
    }
  }
}
:deep(.ol-overlaycontainer-stopevent){
  z-index: 2 !important;
}
.container {
  margin-top: 20px;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 274px;
    height: 35px;
    line-height: 35px;

    background: url(@/assets/img/leftnavbj.png) no-repeat;
    background-size: 100% 100%;
    font-family: MicrosoftYaHeiSemibold;
    color: #fff;
    .title-left {
      font-size: 14px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      text-shadow: 0px 0px 7px #0047ff, 0px 0px 10px #0066ff;
      -webkit-background-clip: text;
      text-indent: 30px;
    }
  }
  .titleb {
    background: url(@/assets/img/leftnavbj1.png) no-repeat;
    background-size: 100% 100%;
    color: #6c92c3;
  }
  .container-con {
    width: 272px;
    height: 80px;
    background: rgba(20, 33, 67, 0.5);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #19233c;
    div {
      font-size: 12px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #6c92c3;
      line-height: 14px;
      -webkit-background-clip: text;
      height: 40px;
      line-height: 40px;
      text-indent: 30px;
      cursor: pointer;
    }
    .active {
      color: #027db4;
    }
  }
}
:deep(.el-input__inner) {
  background: rgba(21, 34, 69, 1);
  border: none;
  height: 42px;
}
:deep(.el-button) {
  background: linear-gradient(135deg, #2270d4 0%, #002689 100%);
  border: none;
}
:deep(.el-input-group__append, .el-input-group__prepend) {
  background: linear-gradient(135deg, #2270d4 0%, #002689 100%);
  border: none;
  color: #fff;
  font-size: 20px;
  height: 40px;
}
.inputbtn {
  background: linear-gradient(135deg, #2270d4 0%, #002689 100%);
  border-radius: 0px 4px 4px 0px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

:deep(.el-input-group__append) {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  width: 40px;
  height: 40px;
  padding: 0px;
}
:deep(.el-tree) {
  background: transparent;
  height: calc(100% - 0.9rem);
  overflow: auto;
  .el-tree-node {
    margin: 0.1rem 0;
  }
  .el-tree-node__label {
    color: #fff;
  }
}

:deep(.el-tree-node__label) {
  color: #fff;
}
:deep(.el-tree) {
  // background: rgba(3, 27, 54, 0.7);
}
:deep(.el-tree-node__content:hover) {
  // background-color: #65a19f !important;
}
:deep(.el-tree-node:focus > .el-tree-node__content) {
  // background: #65a19f !important;
  background: url(@/assets/img/leftnavbj.png) no-repeat;
  background-size: 100% 100%;
}
:deep(.el-tree-node__content) {
  background: url(@/assets/img/leftnavbj1.png) no-repeat;
  background-size: 100% 100%;
}
:deep(.el-tree--highlight-current){
  .el-tree-node.is-current{
    .el-tree-node__content{
      background-color:transparent
    }
  }
}
:deep(.el-tree--highlight-current){
  .el-tree-node__children{
    .el-tree-node.is-current{
      .el-tree-node__content{
        background: #65a19f !important;
      }
    }
  }
}
:deep(.el-tree-node__children) {
  .el-tree-node {
    &:focus {
      .el-tree-node__content {
        background: #65a19f !important;
      }
    }
  }
  .el-tree-node__content {
    background: transparent;
    &:hover {
      background-color: #65a19f !important;
    }
  }
}
</style>
